<div class="main-container">
  <div class="row">
    <div fGrid="6" class="free-demo-board">
      <p>
        {{'DEMO.TIMELINE.DESCRIPTION' | translate}}
      </p>
      <hr>
      <h3 class="free-head-title">{{'API-OPTION' | translate}}<span class="symbol component"></span></h3>
      <div class="free-demo-row">
        <h3 class="free-title">free-timeline</h3>
        <p>{{'DEMO.TIMELINE.INTRO.0' | translate}}</p>
      </div>
      <div class="free-demo-row">
        <h3 class="free-title">free-timeline-item</h3>
        <p>{{'DEMO.TIMELINE.INTRO.1' | translate}}</p>
        <free-table>
          <free-table-header>
            <free-table-row>
              <free-table-head><ng-template>{{'PROPERTY' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'TYPE' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'DESCRIPTION' | translate}}</ng-template></free-table-head>
            </free-table-row>
          </free-table-header>

          <free-table-body>
            <free-table-row>
              <free-table-cell>header</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.TIMELINE.OPTION.0' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>dot</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.TIMELINE.OPTION.1' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
          </free-table-body>
        </free-table>
      </div>
    </div>

    <div fGrid="6" class="free-demo-board">
      <div class="free-demo-board">
        <div class="free-card-board">
          <h3 class="free-toolbar">Import</h3>
          <free-tab-group direction="right" theme="line">
            <free-tab header="CODE">
              <free-code lang="typescript">
                import &#123;TimelineModule&#125; from 'freeng/freeng';
              </free-code>
            </free-tab>
          </free-tab-group>
        </div>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Default</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="PREVIEW">
            <free-timeline>
              <free-timeline-item header="2017/08/31">
                {{'MESSAGE' | translate}}
              </free-timeline-item>
              <free-timeline-item header="2017/07/30">
                <free-image-group [images]="images"></free-image-group>
              </free-timeline-item>
            </free-timeline>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-timeline&gt;
                &lt;free-timeline-item header="2017/08/31"&gt;
              {{'MESSAGE' | translate}}
                &lt;/free-timeline-item&gt;
                &lt;free-timeline-item header="2017/07/30"&gt;
                  &lt;free-image-group [images]="images"&gt;&lt;/free-image-group&gt;
                &lt;/free-timeline-item&gt;
              &lt;/free-timeline&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Custom Header</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="PREVIEW">
            <free-timeline>
              <free-timeline-item>
                <f-header>
                  <h4>
                    <img src="assets/images/t_me.png" class="timeline-header"> TG
                  </h4>
                </f-header>
                <free-image-group [images]="images"></free-image-group>
              </free-timeline-item>
            </free-timeline>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-timeline&gt;
                &lt;free-timeline-item&gt;
                  &lt;f-header&gt;
                    &lt;h4&gt;
                      &lt;img src="assets/images/t_me.png" class="timeline-header"&gt; TG
                    &lt;/h4&gt;
                  &lt;/f-header&gt;
                  &lt;free-image-group [images]="images"&gt;&lt;/free-image-group&gt;
                &lt;/free-timeline-item&gt;
              &lt;/free-timeline&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Default</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="PREVIEW">
            <free-timeline>
              <free-timeline-node>
                <a class="btn btn-primary">NOW</a>
              </free-timeline-node>
              <free-timeline-list>
                <free-timeline-datetime [time]="'8:19'" [date]="'Today'"></free-timeline-datetime>
                <free-timeline-badge>
                  <i class="fa fa-tags"></i>
                </free-timeline-badge>
                <free-timeline-body>
                  <h4>New Items Arrived</h4>
                  <p>Purchased new stationary items for head office</p>
                </free-timeline-body>
              </free-timeline-list>
              <free-timeline-list [inverted]="true">
                <free-timeline-datetime [time]="'8:19'" [date]="'Today'"></free-timeline-datetime>
                <free-timeline-badge>
                  <i class="fa fa-tags"></i>
                </free-timeline-badge>
                <free-timeline-body>
                  <h4>New Items Arrived</h4>
                  <p>Purchased new stationary items for head office</p>
                </free-timeline-body>
              </free-timeline-list>
            </free-timeline>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-timeline&gt;
              &lt;free-timeline-item header="2017/08/31"&gt;
              {{'MESSAGE' | translate}}
              &lt;/free-timeline-item&gt;
              &lt;free-timeline-item header="2017/07/30"&gt;
              &lt;free-image-group [images]="images"&gt;&lt;/free-image-group&gt;
              &lt;/free-timeline-item&gt;
              &lt;/free-timeline&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>
    </div>
  </div>
  <blockquote>FreeNG - {{'MOTTO' | translate}}</blockquote>
</div>
